@react-md/transition

@react-md/transition

Create simple CSS transitions using the provided transition hooks and components utilizing the default transition timing functions. This package also provides a collapse transition, scaling transition, vertical only scaling transition, and a new page transition named cross fade.

Provided components and hooks:

• Collapse or useCollapse - transition an element in and out of view based on the height of the element
• CrossFade or useCrossFade - a transition generally used for a full page transition that fades and slightly moves a child component into view
• ScaleTransition - transition an element in and out of view with a scale transform that can be updated to just be scaleY
• useTransition - a hook implementation of the Transition component from react-transition-group
• useCSSTransition -a hook implementation of the CSSTransition component from react-transition-group
• useFixedPositioning - hooks into the CSSTransition component from react-transition-group to fix an element to another element within the viewport

The rmd-transition-shadow-transition mixin allows you to "performantly" transition between two box shadow values using the opacity trick. This mixin automatically creates a pseudo ::before or ::after element with the final box shadow and animates the opacity once one of the $active-selectors are triggered. The code below will help explain this part a bit more.

Installation

npm install --save @react-md/transition

It is also recommended to install the following packages as they work hand-in-hand with this package:

npm install --save @react-md/theme \
  @react-md/utils

Documentation

You should check out the full documentation for live examples and more customization information, but an example usage is shown below.

Usage

import React, { useState } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Collapse } from "@react-md/transition";

const App = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <>
      <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
      <Collapse collapsed={collapsed}>
        <div>This is my collapsible content!</div>
      </Collapse>
    </>
  );
};

render(<App />, document.getElementById("root"));

Changelog

3.1.0 (2021-09-10)

Bug Fixes

• @react-md/dialog: DialogFooter align prop applies correct classes (644971d)
• @react-md/form: TooManyFilesError is only used if all the other validation has passed (6ed3f54)
• @react-md/form: ensure file names end with a period for useFileUpload extensions (9238140)
• @react-md/form: prevent infinite rerenders when calling useFileUpload's reset in useEffect (b2875b1)
• @react-md/utils: useDropzone fix around onDragLeave behavior (fdff9f2)
• typescript: updated all array types to be readonly (8f71bcb)

Features

• @react-md/form: add isValidFileName option to useFileUpload (dbd0375)
• @react-md/typography: override default typography without globals (ce89374), closes #1239

Documentation

• react-md.dev: updated sassdoc for new module system (4746d26)
• react-md.dev: updated SortableColumns example to import SortOrder type (b629e3e)

Other Internal Changes

• ran yarn format to include new files (48d3d7f)
• Simplifying format and covering json and yml files (#1227) (045ba5e)
• @react-md/dev-utils: fixed spelling of gzipped (baad174)
• examples: updated nextjs examples to latest version of next (b50d745)
• react-md.dev: added sassdoc hot-reloading (9d58e09)
• react-md.dev: updated sassdoc examples to be linkable (9ed096e)
• react-md.dev: Updated fonts for latest nextjs build optimizations (ca9ecbd)
• typescript: support typescript@v4.4.2 (5a9dd72)